<template>
  <div id="app">
    <!-- 横向导航栏 -->
    <el-header style="background-color: #409EFF; padding: 0 20px;">
      <el-row type="flex" justify="space-between" align="middle">
        <!-- 左侧导航菜单 -->
        <el-col :span="18">
          <el-menu
            :default-active="activeMenu"
            mode="horizontal"
            @select="handleMenuSelect"
            class="el-menu-demo"
            background-color="#409EFF"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">关于</el-menu-item>
            <el-menu-item index="3">联系我们</el-menu-item>
          </el-menu>
        </el-col>

        <!-- 右侧用户信息 -->
        <el-col :span="6" style="text-align: right;">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <el-avatar :src="userAvatar" size="small" style="margin-right: 10px;"></el-avatar>
              用户
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <!-- <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu> -->
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>

    <!-- 主体内容 -->
    <el-main style="padding: 20px;">
      <h2>欢迎来到我的应用</h2>
      <p>在这里展示页面的主要内容。</p>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: '1', // 默认选中第一个菜单项
      userAvatar: 'https://avatars.githubusercontent.com/u/1?v=4', // 用户头像地址
    };
  },
  methods: {
    handleMenuSelect(index) {
      console.log(`选中了菜单项 ${index}`);
    },
  },
};
</script>

<style scoped>
.el-menu-item {
  transition: background-color 0.3s ease;
}

/* 悬停时颜色变化 */
.el-menu-item:hover {
  background-color: #2c6ab4;
}

/* 选中时颜色变化 */
.el-menu-item.is-active {
  background-color: #1a73e8;
}

/* 用户头像和菜单链接 */
.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-avatar {
  margin-right: 10px;
}
</style>